<template>
  <div class="asidebar" >
<el-row class="tac"  >
    <el-col :span="24" >
      <el-menu
        :default-active="$route.path"
        active-text-color="#ffd04b"
        background-color="#545c64"
        style="height: 100vh;overflow: hidden"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        router
      >
            <el-menu-item index="/publicnew/personnew">
              <el-icon><User /></el-icon>
              <span>人员管理</span>
            </el-menu-item>
        <el-menu-item index="/publicnew/train">
          <el-icon><OfficeBuilding/></el-icon>
          <span>培训信息</span>

        </el-menu-item>
        <el-menu-item index="/publicnew/exam">
          <el-icon><Notebook/></el-icon>
          <span>考试信息</span>
        </el-menu-item>

        <el-sub-menu  index="4">
          <template #title>
            <el-icon><ChatLineSquare /></el-icon>
            <span>题库管理</span>
          </template>
          <el-menu-item index="/publicnew/questionList">编程题管理</el-menu-item>
          <el-menu-item index="/publicnew/objectList">客观题管理</el-menu-item>
        </el-sub-menu>

      </el-menu>
    </el-col>
  </el-row>
  </div>

</template>

<script>
    export default {
        name: "",
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style scoped>
    .el-menu-item {
        height: 60px;

    }
    .el-menu {
        border-right: 0;
        /* 设计100%屏幕高度*/
        height: 100vh;
    }

    i {
        padding-right: 10px;
    }

    .subgroup {
        padding-left: 40px;
    }
    .tac{
      height: 100%;
      background-color: #545c64;
    }

</style>
